<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>产品信息</title>
    <link rel="stylesheet" href="/plugin/bootstrap-3.3.7/css/bootstrap.css">
    <link rel="stylesheet" href="/plugin/AdminLTE-2.4-rc/css/AdminLTE.css">
    <script src="/plugin/jquery-3.2.1/jquery.js"></script>
    <script src="/plugin/bootstrap-3.3.7/js/bootstrap.js"></script>
    <script src="/plugin/moment-2.19.1/moment.js"></script>
    <script src="/plugin/moment-2.19.1/zh-cn.js"></script>
</head>
<body class="" style="background-color: #ecf0f5;">

<br>




<div class="container">
    <div class="row">
        <div class="col-sm-6<#if imgs?size = 0> hidden-xs</#if>">
            <div class="box box-primary">
                <div class="box-body">
                    <#if (imgs?size != 0)>
                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <#list imgs as img>
                                    <li data-target="#carousel-example-generic" data-slide-to="${img_index}" class="<#if img_index==0 >active</#if>"></li>
                                </#list>
                            </ol>

                            <div class="carousel-inner">
                                <#list imgs as img>
                                    <div class="item <#if img_index==0 >active</#if>" style="background-color: #202020;">
                                        <img src="/file?p=${img}" style="max-height: 500px;margin-left: auto;margin-right: auto">
                                    </div>
                                </#list>
                            </div>

                            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                    <#else>
                        <div style="height: 500px"></div>
                    </#if>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">${it.prodName?html}</h3>
                </div>
                <div class="box-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-2">描述</div>
                            <div class="col-sm-10">${it.detailed!?html}</div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-sm-2">类型</div>
                            <div class="col-sm-10">${typeName?html}</div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-sm-2">曝光日期</div>
                            <div class="col-sm-10">${it.createTime?date}</div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-sm-2">地区</div>
                            <div class="col-sm-10">${province!} ${city!} ${area!}</div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-sm-2">商品链接</div>
                        <#--<div class="col-sm-10">${it.phone!}</div>-->
                            <div class="col-sm-10">${it.url!?html}</div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-sm-2">邮箱</div>
                            <#--<div class="col-sm-10">${it.email!}</div>-->
                            <div class="col-sm-10">这个不能显示</div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-sm-2">曝光人昵称</div>
                            <div class="col-sm-10">${it.name!?html}</div>
                        </div>
                    </div>
                </div>
            </div>

            <button class="btn btn-success" onclick="location.href='/'">返回首页</button>
            <br>
            <br>
        </div>
    </div>



    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">商品曝光动态追踪</h3>
        </div>
        <div class="box-body">
            <ul class="timeline timeline-inverse">
                <#list historys as history>
                    <li>
                        <span class="glyphicon glyphicon-th-list"></span>
                        <div class="timeline-item">
                            <span class="time"><span class="glyphicon glyphicon-time"></span> ${history.createTime?datetime}</span>
                            <h3 class="timeline-header">&nbsp;</h3>
                            <div class="timeline-body">
                            ${history.content?html}
                            </div>
                        </div>
                    </li>
                </#list>



                <li id="h_add">
                    <span class="glyphicon glyphicon-plus"></span>
                    <div class="timeline-item">
                        <div class="timeline-body">
                            <div class="input-group">
                                <input id="hInput" type="text" class="form-control" placeholder="添加新的追踪信息">
                                <span class="input-group-btn">
                                    <button class="btn btn-success" onclick="addHistory()" type="button">添加</button>
                                </span>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <span class="glyphicon"></span>
                </li>
            </ul>
        </div>
    </div>
</div>




<script>

    let prodId = '${it.id?c}';

    function addHistory() {
        $.post("/qzhj/prod/addHistory", {prodId:prodId,content:$("#hInput").val()}, function (d) {
            if (!d)
                return;

            if (!d.success) {
                alert(d.msg);
                return;
            }

            d = d.result;
            let str = '<li><span class="glyphicon glyphicon-th-list"></span>' +
                    '<div class="timeline-item">' +
                    '<span class="time"><span class="glyphicon glyphicon-time"></span> ' +
                    moment(d.createTime).format("YYYY-MM-DD HH:mm:ss") +
                    '</span>' +
                    '<h3 class="timeline-header">'+ d.content + '</h3>' +
                    '</div></li>';

            $("#hInput").val("");
            $("#h_add").before(str);




        }, "json");

    }
</script>
</body>
</html>